<template>
  <div class="analyse-wrapper" :style="siteContentViewHeight">
    <div class="navbar-wrap">
      <div class="nav-btn nav-btn__1" :class="{ 'is-active': groupName === 'mine' }" @click="changeGroup('mine')">
        <span>我的分析</span>
      </div>
      <div class="nav-btn nav-btn__2" :class="{ 'is-active': groupName === 'all' }" @click="changeGroup('all')">
        <span>共享分析</span>
      </div>
      <!-- <div class="nav-btn nav-btn__3" :class="{ 'is-active': groupName === 'human' }">
        相似人群拓展
      </div> -->
    </div>
    <funnel-group ref="funnel-mine" v-if="groupName === 'mine'"></funnel-group>
    <funnel-all-list ref="funnel-all" v-else-if="groupName === 'all'"></funnel-all-list>
  </div>
</template>

<script>
import funnelGroup from './funnel-group'
import funnelAllList from './funnel-all-list'
export default {
  components: {
    funnelGroup,
    funnelAllList
  },
  data() {
    return {
      groupName: 'mine',
      loading: false
    }
  },
  computed: {
    siteContentViewHeight() {
      return { height: this.$store.getters['common/siteContentViewHeight'] + 'px' }
    }
  },
  methods: {
    changeGroup(groupName) {
      this.groupName = groupName
      this.$nextTick(() => this.$refs[`funnel-${this.groupName}`].init())
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/scss/analyse.scss';
</style>
